<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>示例</title>

</head>
<body>

    <!-- Vue.js 的条件指令可以根据表达式的值在 DOM 中渲染或销毁元素/组件 -->

    <div id="app1">

        <p v-if="status === 1">当 status 为 1 时显示改行</p>
        <p v-else-if="status === 2">当 status 为 2 时显示改行</p>
        <p v-else>否则显示改行</p>


        <!-- 如果要通过条件判断显示多个html 标签，则将标签写入在 template 标签中，条件判定成功，只显示template 中的内容 -->
        <template v-if="status === 1">
            <p>这是一段文本</p>
            <p>这是一段文本</p>
            <p>这是一段文本</p>
        </template>

    </div>


    <!-- Vue 在渲染元素时, 出于效率考虑, 会尽可能地复用已有的元素而非重新渲染-->
    <div id="app2">

        <div>

            <!-- label 和input 元素复用, 点击按钮输入到input 中的值不会变 -->
            <template v-if="type === 'name'">
                <label>用户名: </label>
                <input type="text" placeholder="输入用户名" />
            </template>
            <template v-else>
                <label>邮箱: </label>
                <input type="text" placeholder="输入邮箱" />
            </template>
        </div>




        <div>
            <!-- 在标签中加入 key 属性之后, 如果key 的值不一样,则表示标签不复用, 当在input中输入值,点击按钮之后值会被清除掉 -->
            <template v-if="type === 'name'">
                <label>用户名: </label>
                <input type="text" placeholder="输入用户名" key="name-input" />
            </template>
            <template v-else>
                <label>邮箱: </label>
                <input type="text" placeholder="输入邮箱" key="mail-input" />
            </template>

        </div>

        <button @click="handleToggleClick">切换输入类型</button>

    </div>



    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
    <script>

        var app1 = new Vue({
            el: "#app1",
            data: {
                status: 1
            }
        });


        var app2 = new Vue({
            el: "#app2",
            data: {
                type: 'name'
            },
            methods: {
                handleToggleClick: function () {
                    this.type = this.type === 'name' ? 'mail' : 'name';
                }
            }
        })


    </script>

</body>
</html>